<template>
  <div @click="bodyClick" class="container">
    <div v-show="showContent">
      <div class="topbox">
        <img v-src="'static/img/index/indexBanner.jpg'" alt="">
        <div class="head-serch-box flex-row flex-y-center">
          <div @click.stop="toggleShowSelect" class="select-box flex-grow-0 flex-x-center flex-y-center">
            {{selectList[selectIndex]}} <img style="width: .20rem;margin-left: .2rem"
                                             v-src="'/static/img/icon-sort-down.png'" alt="">
            <div v-show="showSelect" class="selectlist">
              <div @click.stop="selectListClick(index)" :class="{'active':selectIndex==index}"
                   v-for="(item,index) in selectList">{{item}}
              </div>
            </div>
          </div>
          <div @click="showSearch" class="flex-grow-1">
            <img style="width: .3rem;margin-left: .3rem;margin-right:.1rem;" v-src="'/static/img/icon-search.png'"
                 alt="">
            请输入小区关键字
          </div>
        </div>
      </div>
      <div class="moduleBox flex-list">
        <div class="nodule_item flex-grow-0" @click="jumpTo(item.toUrl)" v-for="(item,index) in tenModule">
          <img style="width:0.95rem;" v-lazy="item.icon" alt="">
          <div>{{item.title}}</div>
        </div>
      </div>
      <swiper height="2.39rem" :auto="true" :loop="true" dots-position="center" :interval=2000>
        <swiper-item :key="index" v-for="(item,index) in swiperImg">
          <img :src="item" alt="">
        </swiper-item>
      </swiper>
      <div class="list-title flex-row flex-y-center">
        <div class="flex-grow-1">
          <div class="flex-grow-0 left-title flex-y-center">
            <div class="shuxing"></div>
            推荐二手房
          </div>

        </div>
        <div @click="toMore" class="flex-grow-1 right-title flex-right">
          <div>
            更多
            <div></div>
          </div>
        </div>
      </div>
      <button v-show="false" @click="login">login</button>
      <div class="listBox">
        <house-list :label="label" @click.native="toDetails(item.id)" :item="item" :key="index"
                    v-for="(item,index) in houseList"></house-list>
      </div>
    </div>

    <tab-bar v-show="showContent"></tab-bar>
    <!--<tab-footer v-show="showContent"></tab-footer>-->
    <house-search
            ref="search"
            :label="label"
            @on-submit="onSubmit"
            @on-cancel="onCancel" v-show="!showContent"></house-search>
  </div>
</template>

<script>
  import {Swiper, SwiperItem} from 'vux'
  import {GETWXCONFIG, URI_GETSMALLHOUSELIST, Wx_LOGIN} from 'src/const/shareUri'
  import TabBar from 'src/components/TabBar'
  import HouseSearch from 'src/components/HouseSearch'
  import wx from 'weixin-js-sdk'
  import HouseList from 'src/components/houseList'
  import {jumpUrlConfig} from 'src/const/jumpUrlConfig'

  let cdn = cdnBase;

  export default {
    name: "Index",
    components: {SwiperItem, Swiper, HouseSearch, TabBar, HouseList},
    data() {
      return {
        activeIndex: 0,
        label: '二手房',
        selectList: ['二手房', '租房', '新房'],
        showSelect: false,
        showContent: true,
        selectIndex: 0,
        tenModule: [
          {icon: cdn + '/static/img/index/index01.png', title: '二手房', toUrl: jumpUrlConfig.SecondHouseUrl},
          {icon: cdn + '/static/img/index/index02.png', title: '租房', toUrl: jumpUrlConfig.RentingHouseUrl},
          {icon: cdn + '/static/img/index/index03.png', title: '租房登记', toUrl: jumpUrlConfig.RentingUrl},
          {icon: cdn + '/static/img/index/index04.png', title: '买房登记', toUrl: jumpUrlConfig.buyHouseUrl},
          {icon: cdn + '/static/img/index/index05.png', title: '有房出售', toUrl: jumpUrlConfig.HaveHouseSell},
          {icon: cdn + '/static/img/index/index06.png', title: '有房出租', toUrl: jumpUrlConfig.HouseToLet},
          {icon: cdn + '/static/img/index/index07.png', title: '新楼盘', toUrl: jumpUrlConfig.newHouseUrl},
          {
            icon: cdn + '/static/img/index/index08.png',
            title: '贷款计算',
            toUrl: 'https://tool.fooww.com/calculator/mobile/?themeColor=3492e9'
          },
        ],
        swiperImg: [
          cdn + '/static/img/index/ad1.jpg', cdn + '/static/img/index/ad2.png', cdn + '/static/img/index/ad3.jpg'
        ],
        houseList: []
      }
    },
    mounted() {
      this.initData();
      this.$nextTick(() => {
        this.getConfig();
      })
    },
    methods: {
      bodyClick(e) {
        this.showSelect = false;
        // var menu = document.getElementsByClassName('submenu');
        // setTimeout(()=>{
        //   for (let i = 0; i < menu.length; i++) {
        //     menu[i].style.display = 'none';
        //   }
        // },20);

      },
      toMore() {
        let beforeUrl = document.URL.replace(/index/g, "findHouse/houseList").split('?')[0];
        let toUrl = `${beforeUrl}?label=二手房`;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      initData() {
        this.$ajax.get(URI_GETSMALLHOUSELIST, {
          type: 1
        }, res => {
          this.houseList = res.data;
        });
      },
      getConfig() {
        //let url = location.href.split('#')[0] //获取锚点之前的链接
        this.$ajax.get(GETWXCONFIG, {
          url: encodeURIComponent(window.location.href)
        }, res => {
          this.wxInit(res)
        });
      },
      wxInit(res) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
        });
        wx.ready(function () {
          let shareObj = {
            title: '孝感瑞祥房产代理有限公司',
            desc: '诚信服务，专业二手房；欢迎你来',
            link: window.location.href,
            imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          };
          //分享给朋友
          wx.onMenuShareAppMessage(shareObj);
          //分享到朋友圈
          wx.onMenuShareTimeline(shareObj);
          //分享到QQ
          wx.onMenuShareQQ(shareObj);
          // wx.onMenuShareAppMessage({
          //   title: '孝感瑞祥房产代理有限公司',
          //   desc: '诚信服务，专业二手房；欢迎你来',
          //   link: window.location.href,
          //   imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          //   success:function () {
          //
          //   }
          // })
        })
      },
      selectListClick(index) {
        this.selectIndex = index;
        this.showSelect = false;
      },
      toggleShowSelect() {
        this.showSelect = !this.showSelect;
      },
      showSearch() {
        this.$refs.search.setFocus();
        this.showContent = false;
        this.label = this.selectList[this.selectIndex];
        // let input = document.getElementById('find-input');
        // input.focus();
      },
      onCancel(val) {
        this.showContent = val;
      },
      onSubmit(val, label) {
        console.log(val, label);
        // this.showContent = true;
        let beforeUrl = document.URL.replace(/index/g, "findHouse/houseList").split('?')[0];
        let toUrl = `${beforeUrl}?label=${label}&key=${val}`;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      onFocus() {

      },
      jumpTo(url) {
        window.location.href = url;
      },
      toDetails(id) {
        let toUrl = document.URL.replace(/index/g, "houseDetails").split('?')[0];
        toUrl += '?id=' + id;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      login() {
        var appid = 'wx41c44abd02b498e1';
        var redirectUri = encodeURIComponent(Wx_LOGIN); // 授权接口地址
        var state = "abc";
        var scope = 'snsapi_base';//snsapi_base //snsapi_userinfo
        var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
        window.location.href = url;
      }
    }
  }
</script>

<style>
  body {
    background-color: #fff;
  }
</style>

<style lang="less" scoped>
  .container {
    padding-bottom: 50px;
  }

  .topbox {
    position: relative;
  }

  .head-serch-box {
    position: absolute;
    bottom: .36rem;
    width: 6.22rem;
    height: .64rem;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #ddd;
    border-radius: 4px;
    left: 50%;
    font-size: .28rem;
    transform: translateX(-50%);
    color: #777;
    .select-box {
      width: 84px;
      height: 100%;
      border-right: 1px solid #ddd;
      color: #333;
      position: relative;
      .selectlist {
        width: 100%;
        position: absolute;
        left: 0;
        top: .8rem;
        text-align: center;
        border: 1px solid #eee;
        background-color: #fff;
        border-radius: 4px;
        line-height: .48rem;
        padding: .1rem 0;
        .active {
          color: red;
        }
      }
    }
  }

  .moduleBox {
    font-size: 0.26rem;
    padding: 0.3rem 0.4rem .1rem;
    border-top: 0.18rem solid #ececec;
    border-bottom: 0.18rem solid #ececec;
    color: #2c2c2c;
    .nodule_item {
      width: 1.5rem;
      text-align: center;
      > div {
        margin-top: 0.1rem;
        margin-bottom: 0.2rem;
      }
    }
  }

  .list-title {
    height: .99rem;
    border-bottom: 1px solid #eaeaea;
    border-top: 0.18rem solid #ececec;
    padding-left: .17rem;
    padding-right: .25rem;
    .shuxing {
      display: inline-block;
      width: .08rem;
      height: .39rem;
      background: #3593e3;
      margin-right: .2rem;
    }
    .left-title {
      font-size: .3rem;
      font-weight: bold;
      color: #323232;
    }
    .right-title {
      font-size: .28rem;
      color: #6b6b6b;
    }
  }

  .listBox {
    /*padding: .18rem .18rem 0;*/
  }


</style>